<template>
    <div class="line64">
        <article>
            <div class="pics blank"></div>
            <div>

            </div>
            <div class="background">
                <div>
                    <h3>{{this.topic.title}}</h3>
                    <div class="blogul">
                        <ul>
                            <li><i class="el-icon-s-custom"> {{this.topic.auth}}</i></li>
                            <li><i class="el-icon-menu"> {{this.topic.classifyName}}</i></li>
                            <li><i class="fa fa-clock-o"> {{this.topic.createTime}}</i></li>
                            <li><i class="fa fa-eye"> {{this.topic.view}}</i></li>
                            <li><i class="fa fa-heart"> {{this.topic.collect}}</i></li>
                        </ul>
                    </div>
                    <el-button type="primary" class="el-btn">{{this.topic.labelName}}</el-button>
                </div>
                <div class="content" v-html="content"  v-highlight></div>

                <div class="topic-comment">
                    <i class="fa fa-comment-o" style="font-size: 15px"></i> <span style="display: inline-block;color: black">文章评论</span>
                    <el-divider></el-divider>
<!--                    <WriteTopic :show="true"></WriteTopic>-->

                    <div v-bind:class="disShow ? 'noneshow': ''">
                        <el-row :gutter="24">
                            <el-col :span="1"><el-avatar :src="this.$store.getters['user/getUserHeader']" style="margin-top: 15px"></el-avatar></el-col>
                            <el-col :span="23">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 3}"
                                        :maxlength="maxlength"
                                        placeholder="既然来了，那就留下些什么吧^0^"
                                        v-model="commentContent" @input="calcContentNum"
                                        style="font-size: 20px">
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24" style="margin-top: 10px">
                            <el-col :span="4" :offset="12" style="padding-top: 10px;font-size: 15px">还能输入{{contentNum}}字符</el-col>
                            <el-col :span="2" >
                                <div class="emoji">
                                    <no-ssr>
                                      <Emoji  v-on:changeContent="changeContent"></Emoji>
                                    </no-ssr>

                                </div>
                            </el-col>
                            <el-col :span="2" >
                                <el-button type="primary" class="topicbtn" @click="topicContent">发送评论</el-button>
                            </el-col>
                            <el-col :span="2" style="margin-left: 50px">
                                <el-button type="info" class="topicbtn" @click="cancelTopic">取消评论</el-button>
                            </el-col>
                        </el-row>

                        <div style="margin-top: 100px">
                            <TopicDetail :topic-detail="topicDetailData"></TopicDetail>
                          <no-ssr>
                            <InfiniteLoading @infinite="infiniteHandler" ref="infiniteLoading1" spinner="waveDots">
                              <span id="my" slot="no-more" style="font-size: 14px; color: #566573;">~~~我也是有底线的~~~</span>
                            </InfiniteLoading>
                          </no-ssr>
                        </div>
                    </div>

                </div>
            </div>
        </article>
    </div>
</template>
<script>

     import WriteTopic from "./topic/WriteTopic";
     import Emoji from "./Emoji";
     import TopicDetail from "./topic/TopicDetail";
     var showDown = require("showdown"),
         converter = new showDown.Converter();
         converter.setOption("tables",true);
    export default {
        name: "WriteTopic",
        components: {TopicDetail, Emoji, WriteTopic},
        props:{

        },
        data(){
            return{
                topic:{},
                content:"",
                commentContent:"",
                contentNum:1024,
                maxlength:1024,
                disShow:true,
                topicDetailData:{},
                pageIndex :0,
                pageSize:4,
                nextPageIndex:1,
                blogId:-1
            }
        },
        mounted() {
            //获取帖子id
            let href = window.location.href;
            let id = href.split("=")[1];
            this.blogId = id;
            //获取帖子信息
            this.$axios.get("/api/topicInfo/"+id).then(res=>{
                this.topic = res.data;
                this.content =converter.makeHtml(res.data.content);

            }).catch(reason => {});
        },
        methods:{
            changeContent(param){
                this.commentContent = this.commentContent + param;
            },
            calcContentNum(){
                this.contentNum = this.maxlength - this.commentContent.length;
            },
            topicContent(){
                //判断账号是否登录
                if ("" === this.commentContent.trim()){

                    this.$myMessage.error("内容不能为空!");
                    return;
                }
                let token = localStorage.getItem("token");
                if (token === null){
                    this.$myMessage.error("请先登录");
                    //延迟一秒执行
                    setTimeout(() => {
                        this.$store.state.user.dialogVisible = true;
                    }, 1000);
                    return;
                }
                this.$axios.post("/api/loginuser").then(res=>{
                    if (res.status === 200) {
                        this.isLogin = true;
                        let userData = this.$store.getters["user/getUsers"];
                        userData['otherData'] = this.commentContent;
                        userData['parentId'] = 0;
                        userData['blogId'] = this.blogId;
                        this.$axios.post("/api/comment",userData).then(res=>{
                            if (res.status === 200){
                                this.$myMessage.success("评论成功！");
                                this.commentContent = "";
                                this.contentNum = this.maxlength;
                                //更新数据
                                if (res.data.parentId !== 0){
                                    this.disShow = !this.disShow;
                                }
                                this.updateData(res.data);
                            }
                        }).catch(reason => {});
                    }
                }).catch(re=>{});
            },cancelTopic(){
                this.commentContent = "";
                this.contentNum = this.maxlength;
                if (this.cancelDis){
                    this.disShow = !this.disShow;
                }
            },
            updateData(val){
                this.topicDetailData.records.unshift(val);
                this.changeMessage(true);
            },
            changeDis(){
                this.disShow = !this.disShow;
            },
            infiniteHandler($state) {
                this.$axios.post(`/api/topicDetail?pageIndex=${this.nextPageIndex}&pageSize=${this.pageSize}&blogId=${this.blogId}`).then(res=>{
                    if (res.data != null && res.data.records.length > 0){
                        if (JSON.stringify(this.topicDetailData ) === "{}"){
                            this.topicDetailData = res.data;
                        }else {
                            this.topicDetailData.records = this.topicDetailData.records.concat(res.data.records);
                        }
                        this.pageIndex = res.data.current;
                        this.nextPageIndex = res.data.current +1;
                        this.pageSize = res.data.size;
                        this.$refs.infiniteLoading1.$emit('$InfiniteLoading:loaded');
                    }else {
                        if (JSON.stringify(this.topicDetailData ) === "{}"){
                            this.topicDetailData = res.data;
                        }
                        this.$refs.infiniteLoading1.$emit('$InfiniteLoading:complete');
                        this.changeMessage();
                    }

                }).catch(reason => {});
            },
            changeMessage(remove){
                let element = document.getElementsByClassName("infinite-status-prompt");
                for (let e of element) {
                    if (e.innerText === "No results :(" || e.innerText === "还没有评论，快来抢沙发吧！"){
                        if (remove){
                            e.innerText = "";
                        }else {
                            e.innerText = "还没有评论，快来抢沙发吧！";
                            break;
                        }

                    }
                }
            }
        }
    }
</script>

<style scoped>
    .topic-comment{
        margin-top: 100px;
        margin-bottom: 0;
        min-height: 600px;
    }
    .el-btn{
        margin-left: 30px;
        margin-bottom: 40px;
    }
    .background {
        background-color: white;
        border-radius: 10px;
        padding: 30px 30px;
        margin-bottom: 30px;
    }
    .markdown-here-wrapper {
        font-size: 16px;
        line-height: 1.8em;
        letter-spacing: 0.1em;
    }
    .blogul >ul,li{
        display: inline-block;
        list-style: none;
    }
    pre,
    code {
        font-size: 14px;
        font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;
        margin: auto 5px;
    }

    code {
        white-space: pre-wrap;
        border-radius: 2px;
        display: inline;
    }

    pre {
        font-size: 15px;
        line-height: 1.4em;
        display: block;
    }

    pre code {
        white-space: pre;
        overflow: auto;
        border-radius: 3px;
        padding: 1px 1px;
        display: block !important;
    }

    strong,
    b {
        color: #BF360C;
    }

    em
     {
        color: #009688;
    }

    hr {
        border: 1px solid #BF360C;
        margin: 1.5em auto;
    }
    table,
    pre,
    dl,
    blockquote,
    q,
    ul,
    ol {
        margin: 10px 5px;
    }

    ul,
    ol {
        padding-left: 15px;
    }

    li {
        margin: 10px;
    }

    li p {
        margin: 10px 0 !important;
    }

    ul ul,
    ul ol,
    ol ul,
    ol ol {
        margin: 0;
        padding-left: 10px;
    }

    ul {
        list-style-type: circle;
    }

    dl {
        padding: 0;
    }

    dl dt {
        font-size: 1em;
        font-weight: bold;
        font-style: italic;
    }

    dl dd {
        margin: 0 0 10px;
        padding: 0 10px;
    }

    blockquote,
    q {
        border-left: 2px solid #009688;
        padding: 0 10px;
        color: #777;
        quotes: none;
        margin-left: 1em;
    }

    blockquote::before,
    blockquote::after,
    q::before,
    q::after {
        content: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 1.5em 5px !important;
        padding: 0.5em 1em !important;
    }

    h1 {
        font-size: 24px !important;
        border-bottom: 1px solid #ddd !important;
    }

    h2 {
        font-size: 20px !important;
        border-bottom: 1px solid #eee !important;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }


    table {
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 1em;
        font: inherit;
        border: 0;
        margin: 0 auto;
    }

    tbody {
        margin: 0;
        padding: 0;
        border: 0;
    }

    table tr {
        border: 0;
        border-top: 1px solid #CCC;
        background-color: white;
        margin: 0;
        padding: 0;
    }

    table tr:nth-child(2n) {
        background-color: #F8F8F8;
    }

    table tr th,
    table tr td {
        font-size: 16px;
        border: 1px solid #CCC;
        margin: 0;
        padding: 5px 10px;
    }

    table tr th {
        font-weight: bold;
        color: #eee;
        border: 1px solid #009688;
        background-color: #009688;
    }
      #area>table {
          width: 100%;
          table-layout: fixed;
      }

    #area table tr td {
        margin: 0;
        padding: 6px;
        border: 0;

    }


    #md-area {

        width: 100%;
        height: 600px;
        font-size: 18px;
        overflow: hidden;
        font-weight: bold;
        outline: none;
    }

    #show-area {
        height: 600px;
        background-color: #FCF6E5;
    }

    .clearfix:before {
        content: "";
        display: table;
    }

</style>

